<!--
 * @Description: 
 * @Date: 2023-03-10 16:34:00
 * @LastEditors: czp
 * @LastEditTime: 2023-05-08 10:16:57
-->
<template>
	<div class="page">
		<div class="message">
			<div class="msg-list">
				<div class="msg" v-for="(item, index) in message.list" :key="index">
					<div class="left">
						<span class="name"> {{ item.name }}</span>
						<span class="content"> {{ item.content }}...</span>
						<span class="date">{{ item.date }}</span>
					</div>
					<span class="right"> <IFa6RegularThumbsUp /> {{ item.like }}</span>
				</div>
			</div>
			<div class="footer">
				<div>
					<el-button>上一页</el-button>
					<span>{{ message.page }}/5</span>
					<el-button>下一页</el-button>
				</div>
				<el-button class="btn" color="#8A1313" @click="handleUploadInfoClick">+ 发布信息</el-button>
			</div>
		</div>

		<div class="video">
			<div class="header">
				<el-button color="#8A1313 " @click="handleClick">＋分享图/视频</el-button>
				<div class="tabs">
					<div :class="['tab', { active: activeTab == index }]" @click="activeTab = index" v-for="(item, index) in video" :key="index">{{ item.name }}</div>
				</div>
				<el-button class="flag-btn" color="#C39F63" style="color: #ffffff">成为云村民</el-button>
			</div>
			<div class="list-box">
				<div class="list-item" v-for="(item, index) in video[activeTab].list" :key="index">
					<img :src="item.img + '?imageMogr2/thumbnail/750x'" />
					<div class="icon-group">
						<img v-if="item.type == 'img'" src="@/assets/images/iconPark-instagram.svg" alt="" />
						<img v-else src="@/assets/images/iconPark-video-one.svg" alt="" />
						<div>
							<img src="@/assets/images/antFill-eye.svg" alt="" /> <span>{{ item.count }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<el-dialog v-model="showDialog" title="分享图/视频">
			<div class="upload-area">
				<el-upload drag action="" multiple>
					<el-icon class="el-icon--upload"><img src="../../../assets/images/iconPark-upload-one.svg" alt="" /></el-icon>
					<div class="el-upload__text">点击或将文件拖拽到这里上传</div>
					<div class="tips">支持扩展名：.MP4 .jpg .png</div>
				</el-upload>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showDialog = false">取消</el-button>
					<el-button type="primary" color="#8a1313" @click="showDialog = false"> 发布 </el-button>
				</span>
			</template>
		</el-dialog>

		<el-dialog v-model="showUploadInfoDialog" title="发布信息">
			<div class="input-box">
				<el-input class="el-input" type="textarea" placeholder="说点什么~" />
			</div>
			<div class="upload">
				<img src="../../../assets/images/plus.svg" alt="" />
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showUploadInfoDialog = false">取消</el-button>
					<el-button type="primary" color="#8a1313" @click="showUploadInfoDialog = false"> 发布 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup lang="ts" name="FenXiang">
import { useBaseStore } from "@/store/base";
const { cosPrefix } = useBaseStore();
const message = {
	page: 1,
	rows: 4,
	list: [
		{ name: "自信阿德勒", content: "今天去无有图书馆又看书又喝了咖啡，真的巴适！", date: "02-27 11:52", like: 12 },
		{ name: "用户1937822", content: "悬崖餐厅的美食配美景，哈哈哈", date: "02-27 11:52", like: 50 },
		{ name: "小徐小徐是条咸鱼", content: "帅气的小哥哥们快来买我们的苕粉。", date: "02-27 11:52", like: 24 },
		{ name: "从众的阿希", content: "挖了一天的田土，看看大家发了什么好玩的。", date: "02-27 11:52", like: 9 }
	]
};

const activeTab = ref(0);
const video = [
	{
		name: "最新分享",
		list: [
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/1.jpg", count: 325, type: "img" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/2.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/3.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/4.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/5.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/6.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/7.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/8.png", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/9.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/10.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/11.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/12.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/13.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/14.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/15.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/16.jpg", count: 325, type: "video" }
		]
	},
	{
		name: "点赞最多",
		list: [
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/3.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/4.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/5.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/6.jpg", count: 325, type: "video" }
		]
	},
	{
		name: "浏览最多",
		list: [
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/4.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/5.jpg", count: 325, type: "video" },
			{ img: cosPrefix + "three-level/xiangmeng/cunminhudong/6.jpg", count: 325, type: "video" }
		]
	}
];

// 弹出上传视频框
const showDialog = ref(false);
const handleClick = () => {
	showDialog.value = true;
};
// 弹出上传信息框
const showUploadInfoDialog = ref(false);
const handleUploadInfoClick = () => {
	showUploadInfoDialog.value = true;
};
</script>
<style lang="scss" scoped>
.upload {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	margin-top: 20px;
	background-color: #fafafa;
	border: 1px dashed #dddddd;
	border-radius: 4px;
	img {
		width: 24px;
		height: 24px;
	}
}
.input-box {
	position: relative;
	.el-input {
		height: 146px;
		font-family: "Microsoft Yahei";
		font-size: 16px;
		color: rgb(187 187 187 / 100%);
		text-align: left;
		background-color: rgb(247 247 247 / 100%) !important;
		border-radius: 2px;
		outline: none;
		box-shadow: none;
	}
}
:deep(.el-dialog) {
	width: 637px;
	height: 492px;
	border-radius: 4px;
	.el-dialog__title {
		font-family: SourceHanSerif-bold;
		font-size: 20px;
		font-weight: 700;
	}
	.el-upload {
		display: flex;
		.el-icon--upload {
			width: 48px;
			height: 48px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.el-upload__text {
			font-family: PingFangSC-regular;
			font-size: 16px;
			font-weight: 700;
			color: #000000;
		}
		.el-upload-dragger {
			width: 384px;
			height: 195px;
			background-color: #fafafa;
			border: 0.5px dashed #c39f63;
		}
	}
}
.message {
	padding: 40px 320px;
	background-color: #f7f7f7;
	.msg-list {
		display: flex;
		flex-wrap: wrap;
		.msg {
			display: flex;
			justify-content: space-between;
			width: 620px;
			padding: 20px 0;
			margin-right: 40px;
			margin-bottom: 20px;
			border-bottom: 1px solid #eeeeee;
			&:nth-child(2n) {
				margin-right: 0;
			}
			.left {
				display: flex;
				flex-direction: column;
				width: 70%;
				font-size: 18px;
				.name {
					margin-bottom: 10px;
					font-weight: bold;
					color: $theme-color;
				}
				.date {
					margin-top: 10px;
					font-size: 16px;
					color: #bbbbbb;
				}
			}
			.right {
				color: #8a1313;
			}
		}
	}
	.footer {
		position: relative;
		display: flex;
		justify-content: center;
		> div {
			span {
				display: inline-block;
				width: 160px;
				text-align: center;
			}
		}
		.btn {
			position: absolute;
			right: 0;
		}
	}
}
.video {
	padding: 40px 320px;
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.tabs {
			display: flex;
			padding-bottom: 20px;
			.tab {
				padding: 0 20px;
				font-size: 20px;
				cursor: pointer;
				border-right: 1px solid #dedede;
				&:hover,
				&.active {
					color: #8a1313;
				}
				&:last-child {
					border: none;
				}
			}
		}
	}
}
.list-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 40px 0;
	.list-item {
		position: relative;
		width: 24%;
		height: 222px;
		margin-right: 1%;
		margin-bottom: 20px;
		&:nth-child(4n) {
			margin-right: 0;
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			vertical-align: middle;
		}
		.icon-group {
			position: absolute;
			bottom: 10px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 0 10px;
			font-size: 14px;
			color: #ffffff;
			img {
				width: 26px;
				height: 26px;
			}
			div {
				display: flex;
				align-items: center;
				img {
					width: 18px;
					height: 18px;
				}
			}
		}
	}
}

@media all and (max-width: 750px) {
	.message {
		padding: 16px;
		.msg {
			margin-right: 0 !important;
		}
	}
	.video {
		padding: 16px;
		.header {
			position: relative;
			flex-direction: column;
			align-items: flex-start;
			.tabs {
				justify-content: center;
				width: 100%;
				margin-top: 16px;
			}
			.flag-btn {
				position: absolute;
				top: 0;
				right: 0;
			}
		}
		.list-box {
			padding: 0;
			.list-item {
				width: 47.5%;
				margin-right: 5%;
				&:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
	}
	.footer {
		> div {
			span {
				width: 40px !important;
			}
		}
	}
}
</style>
